<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <div class="easy-way-to-create-b">生 成 视 频</div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <div class="group-4163">
      <div class="rectangle5"></div>
      <div class="text">动漫、现实、电影、胶片、科幻、艺术家...</div>
      <div class="av">风格选择</div>
    </div>
    <div class="group-7341">
      <div class="rectangle6"></div>
      <div class="text2">16:9、9：16、2.35：1、4：3....</div>
      <div class="av2">视频尺寸</div>
      <svg
        class="chevron-down"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6 9L12 15L18 9"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <div class="group-7342">
      <div class="rectangle7"></div>
      <div class="text3">1080p、4k....</div>
      <div class="av3">分辨率</div>
    </div>
    <div class="group-7345">
      <div class="rectangle8"></div>
      <div class="text4">1080p、4k....</div>
      <div class="av4">镜头运动</div>
    </div>
    <div class="group-7314">
      <div class="rectangle9"></div>
      <div class="text5">Enter description...</div>
      <div class="av5">画面描述</div>
    </div>
    <div class="button">
      <router-link to="/gen_movie" class="av6">生成</router-link>
    </div>
    <svg
      class="arrow-left"
      width="36"
      height="33"
      viewBox="0 0 36 33"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4.5 16.5H31.5M15 26.125L4.5 16.5L15 26.125ZM4.5 16.5L15 6.875L4.5 16.5Z"
        stroke="white"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.easy-way-to-create-b {
  color: #212b36;
  text-align: left;
  font: 600 48px "Montserrat", sans-serif;
  position: absolute;
  left: 541px;
  top: calc(50% - 175px);
  width: 482px;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 675px;
  top: calc(50% - -350px);
}
.group-4163 {
  position: absolute;
  inset: 0;
}
.rectangle5 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 153px;
  top: 342px;
}
.text {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 170px;
  top: 356px;
}
.av {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 160px;
  top: 317px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.group-7341 {
  position: absolute;
  inset: 0;
}
.rectangle6 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 153px;
  top: 437px;
}
.text2 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 170px;
  top: 451px;
}
.av2 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 160px;
  top: 412px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down {
  position: absolute;
  left: 440px;
  top: 450px;
  overflow: visible;
}
.group-7342 {
  position: absolute;
  inset: 0;
}
.rectangle7 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 566px;
  top: 439px;
}
.text3 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 579px;
  top: 453px;
}
.av3 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 573px;
  top: 414px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.group-7345 {
  position: absolute;
  inset: 0;
}
.rectangle8 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 566px;
  top: 341px;
}
.text4 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 579px;
  top: 355px;
}
.av4 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 573px;
  top: 316px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.group-7314 {
  position: absolute;
  inset: 0;
}
.rectangle9 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 151.24px;
  position: absolute;
  left: 967px;
  top: 335.76px;
}
.text5 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 984px;
  top: 350.67px;
  width: 125px;
  height: 23.43px;
}
.av5 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Inter", sans-serif;
  position: absolute;
  left: 974px;
  top: 307px;
  width: 56px;
  height: 18.11px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.button {
  background: var(--_01, #567df4);
  border-radius: 10px;
  width: 327px;
  height: 54px;
  position: absolute;
  left: 567px;
  top: 556px;
  overflow: hidden;
}
.av6 {
  color: var(--fffcf-9, #fffcf9);
  text-align: center;
  font: 600 20px/24px "Manrope", sans-serif;
  position: absolute;
  left: 143px;
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-left {
  position: absolute;
  left: 27px;
  top: 25px;
  overflow: visible;
}
</style>
